<template>
  <div>
    <Page auto-content-height>
      <FosoTable
        ref="goodsTable"
        :columns="columns"
        :request-api="getRoleListData"
        toolbarbutton-name="新增商品"
        @add="openDrawerHandle('add', $event)"
        @edit="openDrawerHandle('edit', $event)"
      >
        <template #title>
          <text class="text-[16px]">商品信息管理 </text>
        </template>
        <template #action="{ row }">
          <div v-if="!row.parentId">
            <el-button link type="primary">新增SKU</el-button>
            <el-button :icon="Delete" link type="danger" />
          </div>
        </template>
      </FosoTable>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[35%]" @refresh="reloadTable" />
  </div>
</template>

<script setup lang="tsx">
import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { Delete } from '@element-plus/icons-vue';
import { ElTag } from 'element-plus';

import ExtraDrawer from './components/drawer.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

const goodsTable = ref(); // 获取表格实例
const getRoleListData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 1,
        items: [
          {
            id: 10_001,
            parentId: null,
            name: '智能家居系列',
            type: '',
            size: '',
            price: '',
            stock: 150,
            class: 1,
            date: '2023-05-15',
          },
          {
            id: 10_002,
            parentId: null,
            name: '厨房电器套装',
            type: '',
            size: '',
            price: '',
            stock: '',
            class: '',
            date: '2023-06-20',
          },
          {
            id: 10_101,
            parentId: 10_002,
            name: '智能空气炸锅',
            type: 'https://example.com/img/air-fryer.jpg',
            size: '350x350x300',
            price: '￥599',
            stock: 80,
            class: 1,
            date: '2023-03-10',
          },
          {
            id: 10_102,
            parentId: 10_002,
            name: '多功能料理机',
            type: 'https://example.com/img/food-processor.jpg',
            size: '200x200x400',
            price: '￥899',
            stock: 60,
            class: 1,
            date: '2023-04-05',
          },
          {
            id: 10_003,
            parentId: null,
            name: '数码产品',
            type: '',
            size: '',
            price: '',
            stock: 300,
            class: 1,
            date: '2023-07-01',
          },
          {
            id: 10_301,
            parentId: 10_003,
            name: '无线蓝牙耳机',
            type: 'https://example.com/img/earbuds.jpg',
            size: '60x40x30',
            price: '￥399',
            stock: 120,
            class: 1,
            date: '2023-02-28',
          },
          {
            id: 10_302,
            parentId: 10_003,
            name: '智能手表',
            type: 'https://example.com/img/smart-watch.jpg',
            size: '42mm',
            price: '￥1299',
            stock: 75,
            class: 1,
            date: '2023-05-20',
          },
          {
            id: 10_004,
            parentId: null,
            name: '家居装饰',
            type: '',
            size: '',
            price: '',
            stock: 200,
            class: 1,
            date: '2023-06-10',
          },
          {
            id: 10_401,
            parentId: 10_004,
            name: '北欧风格挂画',
            type: 'https://example.com/img/wall-art.jpg',
            size: '60x80',
            price: '￥199',
            stock: 50,
            class: 1,
            date: '2023-04-15',
          },
        ],
      });
    });
  });
};

const columns = computed(() => [
  { type: 'seq', width: 70 },
  { field: 'name', title: '商品名称', minWidth: 300, treeNode: true },
  { field: 'size', title: '产品图' },
  {
    field: 'type',
    title: '描述',
    slots: {
      default: (data: any) => {
        return (
          <img src={data.row.type} style={{ width: '100%', height: '30px' }} />
        );
      },
    },
  },
  {
    title: '类型',
    field: 'class',
    slots: {
      default: (data: any) => {
        return data.row.class === 1 && <ElTag type="success">正品直供 </ElTag>;
      },
    },
  },
  { field: 'price', title: '成本价' },
  {
    title: '库存',
    field: 'stock',
  },
  { field: 'date', title: $t('sys.role.createTime') },
  {
    title: $t('sys.role.operation'),
    minWidth: 200,
    slots: { default: 'action' },
  },
]);

/**
 * @author Buke
 * @description 打开弹窗
 * @param {string} type - 操作类型，'edit' 表示编辑，'add' 表示新增。
 * @param {any} row - 要编辑的行数据对象，包含角色相关信息。
 * @returns {void}
 */
const openDrawerHandle = (type: string, row?: any): void => {
  if (type === 'edit') {
    drawerApi.setState({ title: $t('sys.role.editRole') });
    drawerApi.setData({ type: 'editData', id: row?.id });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
  if (type === 'add') {
    drawerApi.setState({ title: $t('sys.user.addUser') });
    drawerApi.setData({ type: 'addData' });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
};

/**
 * @author Buke
 * @description 处理表格数据加载完成后的操作，如更新表格数据。
 * @returns {void}
 */
const reloadTable = (): void => {
  goodsTable.value?.gridApi.query();
  drawerApi.close();
};
</script>
